<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Icon from "@iconify/svelte";
    import TreeSelect from "./TreeSelect.svelte";
    import { Link, Paragraph } from "../Typography";
    import Space from "../Space/Space.svelte";
    import img from "/src/assets/logo.svg";
    import Button from "../Button/Button.svelte";
    import { DropdownItem, DropdownMenu } from "../Dropdown";
    import { Input } from "../Input";
    import genData from "../../utils/utils";
    import { TreeCheckMod } from "../Tree/Tree.svelte";

    const { Story } = defineMeta({
        title: "Components/Form/TreeSelect",
        component: TreeSelect,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        {@const data = [
            {
                id: "beijing",
                title: "北京",
                children: [
                    { id: "gugong", title: "故宫" },
                    { id: "tiantan", title: "天坛" },
                ],
            },
            {
                id: "zhejiang",
                title: "浙江",
                children: [
                    { id: "xihu", title: "西湖" },
                    { id: "linyin", title: "灵隐" },
                ],
            },
        ]}
        <TreeSelect {data} />
    {/snippet}
</Story>

<Story name="Disabled" args={{ disabled: true }}>
    {#snippet template(args)}
        {@const data = [
            {
                id: "beijing",
                title: "北京",
                children: [
                    { id: "gugong", title: "故宫" },
                    { id: "tiantan", title: "天坛" },
                ],
            },
            {
                id: "zhejiang",
                title: "浙江",
                children: [
                    { id: "xihu", title: "西湖" },
                    { id: "linyin", title: "灵隐" },
                ],
            },
        ]}
        <TreeSelect {...args} {data} />
    {/snippet}
</Story>

<Story name="Size">
    {#snippet template(args)}
        {@const data = [
            {
                id: "beijing",
                title: "北京",
                children: [
                    { id: "gugong", title: "故宫" },
                    { id: "tiantan", title: "天坛" },
                ],
            },
            {
                id: "zhejiang",
                title: "浙江",
                children: [
                    { id: "xihu", title: "西湖" },
                    { id: "linyin", title: "灵隐" },
                ],
            },
        ]}
        <Space>
            <TreeSelect {data} size="large" />
            <TreeSelect {data} />
            <TreeSelect {data} size="small" />
        </Space>
    {/snippet}
</Story>

<Story name="Clearable">
    {#snippet template(args)}
        {@const data = [
            {
                id: "beijing",
                title: "北京",
                children: [
                    { id: "gugong", title: "故宫" },
                    { id: "tiantan", title: "天坛" },
                ],
            },
            {
                id: "zhejiang",
                title: "浙江",
                children: [
                    { id: "xihu", title: "西湖" },
                    { id: "linyin", title: "灵隐" },
                ],
            },
        ]}
        <TreeSelect {data} clearable />
    {/snippet}
</Story>

<Story name="Prepend">
    {#snippet template(args)}
        {@const data = [
            {
                id: "beijing",
                title: "北京",
                children: [
                    { id: "gugong", title: "故宫" },
                    { id: "tiantan", title: "天坛" },
                ],
            },
            {
                id: "zhejiang",
                title: "浙江",
                children: [
                    { id: "xihu", title: "西湖" },
                    { id: "linyin", title: "灵隐" },
                ],
            },
        ]}
        <TreeSelect {data} clearable>
            {#snippet prepend()}
                <Icon icon="f7:tag" />
            {/snippet}
        </TreeSelect>
    {/snippet}
</Story>

<Story name="Multi">
    {#snippet template(args)}
        {@const data = [
            {
                id: "beijing",
                title: "北京",
                children: [
                    { id: "gugong", title: "故宫" },
                    { id: "tiantan", title: "天坛" },
                ],
            },
            {
                id: "zhejiang",
                title: "浙江",
                children: [
                    { id: "xihu", title: "西湖" },
                    { id: "linyin", title: "灵隐" },
                ],
            },
        ]}
        <TreeSelect {data} clearable multi></TreeSelect>
    {/snippet}
</Story>
<Story name="CheckRelation">
    {#snippet template(args)}
        {@const data = [
            {
                id: "beijing",
                title: "北京",
                children: [
                    { id: "gugong", title: "故宫" },
                    { id: "tiantan", title: "天坛" },
                ],
            },
            {
                id: "zhejiang",
                title: "浙江",
                children: [
                    { id: "xihu", title: "西湖" },
                    { id: "linyin", title: "灵隐" },
                ],
            },
        ]}
        <TreeSelect {data} clearable multi checkRelation="unRelated"></TreeSelect>
    {/snippet}
</Story>

<Story name="showMax">
    {#snippet template(args)}
        {@const data = [
            {
                id: "beijing",
                title: "北京",
                children: [
                    { id: "gugong", title: "故宫" },
                    { id: "tiantan", title: "天坛" },
                ],
            },
            {
                id: "zhejiang",
                title: "浙江",
                children: [
                    { id: "xihu", title: "西湖" },
                    { id: "linyin", title: "灵隐" },
                ],
            },
        ]}
        <TreeSelect {data} clearable multi checkRelation="unRelated" showMax={2}></TreeSelect>
    {/snippet}
</Story>

<Story name="ValueClosable">
    {#snippet template(args)}
        {@const data = [
            {
                id: "beijing",
                title: "北京",
                children: [
                    { id: "gugong", title: "故宫" },
                    { id: "tiantan", title: "天坛" },
                ],
            },
            {
                id: "zhejiang",
                title: "浙江",
                children: [
                    { id: "xihu", title: "西湖" },
                    { id: "linyin", title: "灵隐" },
                ],
            },
        ]}
        <TreeSelect {data} clearable multi value={["beijing", "tiantan"]} valueClosable onchange={(v) => console.log(v)}></TreeSelect>
    {/snippet}
</Story>

<Story name="CheckMod">
    {#snippet template(args)}
        {@const data = [
            {
                id: "beijing",
                title: "北京",
                children: [
                    { id: "gugong", title: "故宫" },
                    { id: "tiantan", title: "天坛" },
                ],
            },
            {
                id: "zhejiang",
                title: "浙江",
                children: [
                    { id: "xihu", title: "西湖" },
                    { id: "linyin", title: "灵隐" },
                ],
            },
        ]}
        <div>CHILD:</div>
        <TreeSelect {data} clearable multi valueClosable mode={TreeCheckMod.CHILD}></TreeSelect>
        <div>HALF:</div>
        <TreeSelect {data} clearable multi valueClosable mode={TreeCheckMod.HALF}></TreeSelect>
        <div>SHALLOW:</div>
        <TreeSelect {data} clearable multi valueClosable mode={TreeCheckMod.SHALLOW}></TreeSelect>
        <div>FULL:</div>
        <TreeSelect {data} clearable multi valueClosable mode={TreeCheckMod.FULL}></TreeSelect>
    {/snippet}
</Story>
